/* ==========================================================================
   MOBILE FIRST MODULE SKELETON
   ========================================================================== */

// MOBILE STYLES ////////////////////////////////////////////////////////////

body,html {
    background: #ebebeb;
    font-size:13px;
    height: 100%;
}

.padding {
    padding: 15px;
}



// BREAKPOINT 1 (480) ////////////////////////////////////////////////////////////

@media only screen and (min-width: 480px) {

    .module {}

}


// BREAKPOINT 2 (768) ////////////////////////////////////////////////////////////

@media only screen and (min-width: 768px) {


    .holder {
        @include outer-container;
    }

    .wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin-bottom:-84px;
    }

    .table {
        @include span-columns(12);
        @include row(table);
    }

    .sidebar {
        @include span-columns(3.5);
        padding: 0;
        vertical-align:top;
    }

    .content {
        @include span-columns(8.5);
        @include reset-display;
        @include clearfix;
    }

    // Lets put this here for now

    .gist-data {
        max-height: 300px;
        overflow: auto;
    }
}


// BREAKPOINT 3 (1024) ////////////////////////////////////////////////////////////

@media only screen and (min-width: 1024px) {
    .holder {
        max-width: 1024px;
        margin: auto;
    }

    .table {
        @include span-columns(12);
        @include row(table);
    }


    .sidebar {
        @include span-columns(3);
        padding: 0;
        vertical-align:top;
    }

    .content {
        @include span-columns(9);
        @include reset-display;
        @include clearfix;
    }
}


// BREAKPOINT 4 (1440) ////////////////////////////////////////////////////////////

@media only screen and (min-width: 1440px) {



}